<template>
  <div id="DisasterRecovery" ref="container">
    <!-- 待办 -->
    <div class="handle">
      <dv-border-box-11 title="待办" :titleWidth="150" :key="componentKey">
        <div class="item_box">
          <div class="box">
            <div class="count">
              <p>应急响应</p>
              <span>{{ getTodoData.answer.sum }}</span>
            </div>
            <span>{{
              getTodoData.answer.state == 0
                ? "无审批"
                : getTodoData.answer.state == 1
                ? "待审批"
                : "审批完成"
            }}</span>
          </div>
          <div class="box" style="background-color: #ee8041">
            <div class="count">
              <p>预案管理</p>
              <span>{{ getTodoData.plan.sum }}</span>
            </div>
            <span>{{
              getTodoData.plan.state == 0
                ? "无审批"
                : getTodoData.plan.state == 1
                ? "待审批"
                : "审批完成"
            }}</span>
          </div>
          <div class="box" style="background-color: #762fef">
            <div class="count">
              <p>演练切换</p>
              <span>{{ getTodoData.drill.sum }}</span>
            </div>
            <span>{{
              getTodoData.drill.state == 0
                ? "无审批"
                : getTodoData.drill.state == 1
                ? "待审批"
                : "审批完成"
            }}</span>
          </div>
          <div class="box" style="background-color: #28bc70">
            <div class="count">
              <p>告警管理</p>
              <span>{{ getTodoData.alarm.sum }}</span>
            </div>
            <span>{{
              getTodoData.alarm.state == 0
                ? "无审批"
                : getTodoData.alarm.state == 1
                ? "待审批"
                : "审批完成"
            }}</span>
          </div>
        </div>
      </dv-border-box-11>
    </div>
    <!-- 演练日历 -->
    <div class="calendar">
      <dv-border-box-11 title="演练日历" :titleWidth="200" :key="componentKey">
        <div class="date">
          <Calendar />
        </div>
      </dv-border-box-11>
    </div>
    <!-- 公告 -->
    <div class="notice">
      <dv-border-box-11 title="公告" :titleWidth="150" :key="componentKey">
        <div class="notice_box">
          <ul>
            <li v-for="(item, index) in getNoticeData" :key="index">
              <span class="s1">{{ item.title }}</span>
              <span>{{ item.dateTime }}</span>
            </li>
          </ul>
        </div>
      </dv-border-box-11>
    </div>
    <!-- 消息 -->
    <div class="message">
      <dv-border-box-11 title="消息" :titleWidth="150" :key="componentKey">
        <div class="message_box">
          <ul>
            <li v-for="(item, index) in getInfoData" :key="index">
              <span class="s1">{{ item.title }}</span>
              <span>{{ item.dateTime }}</span>
            </li>
          </ul>
        </div>
      </dv-border-box-11>
    </div>
  </div>
</template>

<script>
import {
  getAgentData_Api, //获取待办数据
  getInfo_Api, //公告信息
} from "@/api/automated/DisasterRecovery.js";
import Calendar from "./Calendar.vue";
export default {
  components: {
    Calendar,
  },
  data() {
    return {
      //宽度
      componentKey: 0,
      todo_data: [], //待办数据
      info: [], //公告信息
    };
  },
  mounted() {
    const container = this.$refs.container;

    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const { target, contentRect } = entry;
        const { width } = contentRect;
        // 宽度发生变化时的处理逻辑
        this.componentKey = width;
      }
    });
    resizeObserver.observe(container);
  },
  created() {
    this.getAgentData(); //获取代办数据
    this.getInfo(); //获取公告信息
  },
  methods: {
    //获取代办数据
    getAgentData() {
      getAgentData_Api().then((res) => {
        this.todo_data = res.data;
      });
    },

    //获取公告信息
    getInfo() {
      getInfo_Api().then((res) => {
        this.info = res.data;
      });
    },
  },
  computed: {
    //处理待办数据
    getTodoData() {
      const tempObj = {
        answer: {
          dateTime: null,
          endTime: null,
          logotype: 0,
          startTime: null,
          state: 0,
          sum: 0,
          title: null,
        },
        plan: {
          dateTime: null,
          endTime: null,
          logotype: 0,
          startTime: null,
          state: 0,
          sum: 0,
          title: null,
        },
        drill: {
          dateTime: null,
          endTime: null,
          logotype: 0,
          startTime: null,
          state: 0,
          sum: 0,
          title: null,
        },
        alarm: {
          dateTime: null,
          endTime: null,
          logotype: 0,
          startTime: null,
          state: 0,
          sum: 0,
          title: null,
        },
      };
      this.todo_data.forEach((item) => {
        if (item.logotype == 0) {
          //应急响应
          tempObj.answer = item;
        } else if (item.logotype == 1) {
          //预案管理
          tempObj.plan = item;
        } else if (item.logotype == 2) {
          //演练切换
          tempObj.drill = item;
        } else {
          //告警管理
          tempObj.alarm = item;
        }
      });
      return tempObj;
    },
    //筛选消息
    getInfoData() {
      return this.info.filter((item) => item.type == 1);
    },
    //筛选公告
    getNoticeData() {
      return this.info.filter((item) => item.type == 0);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main #DisasterRecovery {
  border-radius: 5px;
  width: 100%;
  height: calc(100vh - 100px);
  background-color: #10162e;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 10px;
  box-shadow: 0 0 10px 5px rgba($color: #10162e, $alpha: 0.6);
  .handle {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    .border-box-content {
      position: relative;
      .item_box {
        position: absolute;
        left: 5%;
        bottom: 10%;
        width: calc(100% - 10%);
        height: calc(100% - 42%);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .box {
          width: 90px;
          height: 100px;
          background-color: #1c74fa;
          border-radius: 5px;
          box-sizing: border-box;
          padding: 10px;
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 15px 4px rgba($color: #ffffff, $alpha: 0.2);
          .count {
            text-align: center;
            color: #ffffff;
            padding-bottom: 2px;
            border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.5);
            p {
              font-size: 13px;
              padding-bottom: 5px;
            }
            span {
              color: #ffffff;
              font-size: 30px;
            }
          }
          span {
            font-size: 10px;
            color: rgba($color: #ffffff, $alpha: 0.5);
          }
          &::after {
            content: "";
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            bottom: -20px;
            background-color: rgba($color: #ffffff, $alpha: 0.1);
          }
        }
      }
    }
  }
  .calendar {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 11;
    .date {
      box-sizing: border-box;
      padding: 80px 20px 20px;
      height: 100%;
      overflow: hidden;
    }
  }
  .notice {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 6;
    .notice_box {
      box-sizing: border-box;
      padding: 80px 20px 20px;
      ul li {
        color: #d4caca;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 15px;
        .s1 {
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .message {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 6;
    grid-row-end: 11;
    .message_box {
      box-sizing: border-box;
      padding: 80px 20px 20px;
      ul li {
        color: #d4caca;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 15px;

        .s1 {
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>